<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:replace="index::head">

</head>

<body>
	<!-- 导航栏 -->
	<ul class="layui-nav" th:replace="index::nav">

	</ul>

	<div>
		<div style="text-align: center;background-color: hsl(203, 51%, 51%);color: white;height: 150px;">
			<h1 style="padding: 50px">客房管理</h1>
		</div>

		<button class="layui-btn layui-btn-normal" style="margin: 30px;" onclick="addRoom()" sa:hasRole="admin">新增</button>

		<div class="layui-container" style="margin-top: 20px;">
			<form class="layui-form" action="/search" lay-filter="searchForm">
				<div class="layui-form-item" style="display: flex; align-items: center;">
					<!-- 第一个输入框 -->
					<div style="display: flex; align-items: center; margin-right: 10px;">
						<label class="layui-form-label" style="width: auto;">类型</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" name="type" value="" placeholder="" autocomplete="off"
								class="layui-input">
						</div>
					</div>

					<!-- 第二个输入框 -->
					<div style="display: flex; align-items: center; margin-right: 10px;">
						<label class="layui-form-label" style="width: auto;">房号</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" name="location" value="" placeholder="" autocomplete="off"
								class="layui-input">
						</div>
					</div>

					<!-- 第三个输入框 -->
					<div style="display: flex; align-items: center; margin-right: 10px;">
						<label class="layui-form-label" style="width: auto;">价格</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" name="price" value="" placeholder="" autocomplete="off"
								class="layui-input">
						</div>
					</div>

					<!-- 第四个下拉选择框（状态） -->
					<div style="display: flex; align-items: center; margin-right: 10px;">
						<label class="layui-form-label" style="width: auto;">状态</label>
						<div class="layui-input-inline" style="width: 150px;">
							<select name="isFree">
								<option value="">请选择状态</option>
								<option value="1">空闲</option>
								<option value="0">已入住</option>
								<option value="2">已预订</option>
							</select>
						</div>
					</div>

					<!-- 搜索按钮 -->
					<button lay-submit class="layui-btn layui-btn-normal" lay-filter="searchBtn">搜索</button>

				</div>
			</form>
		</div>

		<div>
			<table class="layui-table" lay-even lay-skin="line" lay-size="lg" style="margin: 30px;">
				<colgroup>
					<col width="150">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>ID</th>
						<th>类型</th>
						<th>尺寸</th>
						<th>房号</th>
						<th>价格</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- 使用 Thymeleaf 循环渲染列表 -->
					<tr th:each="room : ${rooms}">
						<td th:text="${room.id}"></td>
						<td th:text="${room.type}"></td>
						<td th:text="${room.size}"></td>
						<td th:text="${room.location}"></td>
						<td th:text="${room.price}"></td>
						<td>
							<span th:switch="${room.isFree}">
								<span th:case="1" th:class="'layui-badge layui-bg-green'" th:text="'空房'"></span>
								<span th:case="0" th:class="'layui-badge layui-bg-cyan'" th:text="'已入住'"></span>
								<span th:case="2" th:class="'layui-badge layui-bg-orange'" th:text="'已预订'"></span>
								<span th:case="*" th:class="'layui-badge layui-bg-gray'" th:text="'未知'"></span>
							</span>

						</td>
						<td>
							<a class="layui-btn layui-btn-xs layui-btn-normal" th:onclick="|edit(${room.id})|" sa:hasRole="admin">编辑</a>
							<a th:onclick="|del(${room.id})|" class="layui-btn layui-btn-xs layui-btn-danger" sa:hasRole="admin">删除</a>
							<a th:onclick="|book(${room.id})|" th:if="${room.isFree}==1" sa:hasRole="user"
								class="layui-btn layui-btn-xs layui-btn-danger">预订</a>
							<a th:onclick="|checkIn(${room.id})|" th:if="${room.isFree}==1" sa:hasRole="user"
								class="layui-btn layui-btn-xs layui-btn-danger">办理入住</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<!-- 弹窗内容 -->
	<div id="guestFormPopup" style="display: none;">
		<form class="layui-form" id="guestForm">
			<div class="layui-form-item">
				<label class="layui-form-label">房间ID</label>
				<div class="layui-input-block">
					<input type="text" name="roomId" id="checkInRoomId" readonly placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="name" required lay-verify="required" placeholder="请输入姓名"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-block">
					<input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入电话"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">身份证</label>
				<div class="layui-input-block">
					<input type="text" name="idCard" required lay-verify="required" placeholder="请输入身份证"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="sureCheck">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<div id="guestFormPopup2" style="display: none;">
		<form class="layui-form" id="guestForm">
			<div class="layui-form-item">
				<label class="layui-form-label">房间ID</label>
				<div class="layui-input-block">
					<input type="text" name="roomId" id="checkInRoomId2" readonly placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="name" required lay-verify="required" placeholder="请输入姓名"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-block">
					<input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入电话"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">身份证</label>
				<div class="layui-input-block">
					<input type="text" name="idCard" required lay-verify="required" placeholder="请输入身份证"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">入住时间</label>
				<div class="layui-input-block">
					<input type="text" name="bookTime" id="bookTime" required lay-verify="required" placeholder="请选择时间"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="sureCheck2">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</body>
<script>
	function book(id) {
		layui.use(['layer'], function (args) {
			var layer = layui.layer;
			var form = layui.form;
			var laydate = layui.laydate;
			// 初始化日期选择器
			laydate.render({
				elem: '#bookTime', // 绑定元素
				type: 'datetime', // 类型，'date' 代表日期，'datetime' 代表日期时间
				format: 'yyyy-MM-dd HH:mm', // 设置日期格式
				trigger: 'click' // 触发方式，点击触发
			});

			layer.open({
				type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
				shadeClose: true,
				title: '入住登记',
				area: ['auto', 'auto'],
				content: $('#guestFormPopup2'),
				success: function (layero) {
					$('#checkInRoomId2').val(id);
				}
			});
		});
	}

	function checkIn(id) {
		layui.use(['layer'], function (args) {
			var layer = layui.layer;
			var form = layui.form

			layer.open({
				type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
				shadeClose: true,
				title: '入住登记',
				area: ['auto', 'auto'],
				content: $('#guestFormPopup'),
				success: function (layero) {
					$('#checkInRoomId').val(id);
				}
			});
		});
	}


	function edit(id) {
		$.get("/room/get/" + id, function (data) {
			if (data.code === 200) {
				room = data.data;
				layui.use(['layer'], function (args) {
					var layer = layui.layer;
					var form = layui.form;
					layer.open({
						type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
						shadeClose: true,
						title: '编辑',
						area: ['auto', 'auto'],
						content: `
		  <form class="layui-form"  lay-filter="testform">
			<input type="hidden" name="id" value="${room.id}">
		<div class="layui-form-item">
			<label class="layui-form-label">房子类型</label>
			<div class="layui-input-block">
				<input type="text" name="type" value="${room.type}" required lay-verify="required" placeholder="请输入房子类型"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">尺寸</label>
			<div class="layui-input-block">
				<input type="text" name="size" value="${room.size}" required lay-verify="required" placeholder="请输入尺寸"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">房号</label>
			<div class="layui-input-block">
				<input type="text" name="location" value="${room.location}" required lay-verify="required" placeholder="请输入房号"
					autocomplete="off" class="layui-input">
			</div>
		</div>
				<div class="layui-form-item">
			<label class="layui-form-label">价格</label>
			<div class="layui-input-block">
				<input type="text" name="price" value="${room.price}" required lay-verify="required" placeholder="请输入价格"
					autocomplete="off" class="layui-input">
			</div>
		</div>
					<input type="text" name="isFree"  value="${room.isFree}" hidden>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>`,
						success: function (layero) {
							form.render();
						}
					});

				});
			}
		})
	}

	function addRoom() {
		layui.use(['layer'], function (args) {
			var layer = layui.layer;
			var form = layui.form;
			layer.open({
				type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
				shadeClose: true,
				title: '新增客房',
				area: ['auto', 'auto'],
				content: `
		  <form class="layui-form"  lay-filter="testform">
		<div class="layui-form-item">
			<label class="layui-form-label">房子类型</label>
			<div class="layui-input-block">
				<input type="text" name="type" value="" required lay-verify="required" placeholder="请输入房子类型"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">尺寸</label>
			<div class="layui-input-block">
				<input type="text" name="size" value="" required lay-verify="required" placeholder="请输入尺寸"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">房号</label>
			<div class="layui-input-block">
				<input type="text" name="location" value="" required lay-verify="required" placeholder="请输入房号"
					autocomplete="off" class="layui-input">
			</div>
		</div>
				<div class="layui-form-item">
			<label class="layui-form-label">价格</label>
			<div class="layui-input-block">
				<input type="text" name="price" value="" required lay-verify="required" placeholder="请输入价格"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>`,
				success: function (layero) {
					form.render();
				}
			});

		});
	}

	function del(id) {
		layer.confirm('确定要删除这条吗？', {
			btn: ['删除', '取消']
		}, function () {
			$.get('/room/remove/' + id, function (data) {
				if (data.code === 200) {
					layer.msg('删除OK');
					setTimeout(() => {
						window.location.reload();
					}, 1400);
				}

			})
		}, function () {

		});

	}

	layui.use(['layer'], function (args) {
		var layer = layui.layer;
		var form = layui.form;

		form.on('submit(formDemo)', function (data) {
			$.post('/room', data.field, function (data) {
				if (data.code === 200) {
					layer.msg('添加OK');
					setTimeout(() => {
						layer.closeAll();
						window.location.reload();
					}, 1400);
				}
			})
			return false;
		});


		form.on('submit(formDemo2)', function (data) {
			$.post('/room', data.field, function (data) {
				if (data.code === 200) {
					layer.msg('更新OK');
					setTimeout(() => {
						layer.closeAll();
						window.location.reload();
					}, 1400);
				}
			})
			return false;
		});

		form.on('submit(sureCheck)', function (data) {
			$.post('/check-in-record/checkIn', data.field, function (data) {
				if (data.code === 200) {
					layer.msg('预订成功');
					setTimeout(() => {
						layer.closeAll();
						window.location.reload();
					}, 1400);
				}
			})
			return false;
		});

		form.on('submit(sureCheck2)', function (data) {
			$.post('/reservation', data.field, function (data) {
				if (data.code === 200) {
					layer.msg('预订成功');
					setTimeout(() => {
						layer.closeAll();
						window.location.reload();
					}, 1400);
				}
			})
			return false;
		});
	});

</script>

</html>